<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/10/30
  Time: 16:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String imgPath = request.getServletContext().getRealPath("/productImages");
%>
<html>
<head>
    <title>商品列表</title>
    <link rel="stylesheet" href="<%=path%>/resources/css/font.css">
    <link rel="stylesheet" href="<%=path%>/resources/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/resources/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/resources/js/x-layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/resources/js/xadmin.js"></script>
    <style>
        .layui-table-cell{
            height:80px;
            line-height: 80px;
        }
    </style>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
          <span >
            <a href="">首页/</a>
            <a href="">商品管理/</a>
            <a>
              <cite>商品列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:40px">&#xe669;</i></a>
</div>
<div class="x-body">
    <div class="layui-form x-center" style="width:1000px">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="productName" id="productName" placeholder="请输入商品名称"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="productType" id="productType" placeholder="请输入商品类型"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select id="productState">
                        <option value="">商品状态</option>
                        <option value="下架">下架</option>
                        <option value="上架">上架</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn" data-type="reload" id="check">搜索</button>
                </div>
            </div>
        </div>
    </div>
    <table type="layui-hide" id="productTable" lay-filter="productTable"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('上架商品','<%=path%>/product/addProductHtm',700,600)"><i class="layui-icon"></i>添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    {{#  if(d.productState === '上架'){}}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="下架">下架</a>
    {{#} else { }}
    <a class="layui-btn layui-btn-xs" lay-event="上架">上架</a>
    {{#} }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="productStateJs">
    {{#  if(d.productState === '上架'){}}
    <span class="layui-btn layui-btn-normal layui-btn-mini" style="margin-top: 20px">上架</span>
    {{#}else { }}
    <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled" style="margin-top: 20px">下架</span>
    {{#} }}
</script>
<script>
    layui.use([ 'layer','jquery','table' ], function() {
        var layer = layui.layer,
            $ = layui.$,
            table = layui.table;

        table.render({
            elem: '#productTable'
            ,id:'productTable'
            ,limit:5
            ,url:"<%=path%>/product/getProductPage"
            ,page: true
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'productName', title: '商品名称'}
                ,{field:'productDescription', title: '商品描述'}
                ,{field:'productInventory', title: '商品库存',sort:true}
                ,{field:'productType', title: '商品类型',sort:true}
                ,{field:'productSaleAccount', title: '销售数量',sort:true}
                ,{field:'productPrice', title: '商品价格',sort:true}
                ,{field:'images', title: '商品图片',width:110 ,templet: '<div><img src="{{d.productImage}}" style="width: 80px;height: 80px "></div>'}
                ,{field:'productState', title: '状态',width:100 ,templet: '#productStateJs',sort:true }
                ,{fixed:'right', title:'操作', toolbar: '#barDemo',width:190}
            ]]
        });

        $('#check').click(function(){
            var productName = $('#productName');
            var productType = $('#productType');
            var productState = document.getElementById("productState").value;
            table.reload('productTable', {
                page:{
                    curr:1
                },
                where: {
                //设定异步数据接口的额外参数，任意设
                    productName:productName.val(),
                    productType:productType.val(),
                    productState:productState
                }
            });
        });
        table.on('toolbar(productTable)',function (obj) {
            var data = obj.data;
            if(obj.event == 'delAll'){
                var checkStatus = table.checkStatus('productTable')
                    ,data = checkStatus.data;
                var ids="";
                for(var i=0;i<data.length;i++){
                    ids=ids+data[i].productId+";"
                }
                layer.confirm('确认要删除吗？', function(index) {
                    $.get("<%=path%>/product/delProduct?productIds=" + ids, function(data) {
                        if (data == "success") {
                            layer.alert("删除成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        } else {
                            layer.msg('删除失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            }
        })
        //监听工具条
        table.on('tool(productTable)', function(obj){
            var data = obj.data;
            if(obj.event === '上架'||obj.event === '下架'){
                layer.confirm('确认要'+obj.event+'吗？',function(index){
                    $.get("<%=path%>/product/updateProductState?productId="+data.productId+"&productState="+obj.event,function(data){
                        if(data=="success"){
                            layer.alert(obj.event+"成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        }else{
                            layer.msg(obj.event+'失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            } else if(obj.event === 'del'){
                layer.confirm('确认要删除吗？', function(index) {
                    $.get("<%=path%>/product/delProduct?productIds=" + data.productId, function(data) {
                        if (data == "success") {
                            layer.alert("删除成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        } else {
                            layer.msg('删除失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                x_admin_show('编辑','<%=path%>/product/updateProductHtm?productId='+data.productId,700,600);
            }
        });
    });

    function delAll (argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }


</script>
</body>
</html>
